﻿<template>
  <div class="git_Exchange_contain" ref="git_contain">
    <Header_other v-bind:header_name="header_name"></Header_other>
    <!-- 弹出层 S -->
    <!--<layer_give_friend v-show="layer_give_friend_data" @newNodeEvent="layer_give_friend_f"  @get_mess="get_mess_f"  :firend_data="firend_list" :Exc_total="list.quantity">
    </layer_give_friend>-->
    <!-- 弹出层 E -->
    <!--friend layer s-->
    <div v-show="layer_give_friend_data">
      <div class="letter_send_box" v-on:click.self="hid_layer">
        <div class="friend_box">
          <div class="friend_box_header">
            赠予好友
          </div>
          <div id="wrapper2" ref="contain" class="clearfix">
            <ul id="scroller" ref="el" >
              <li class="list_for_friend_box" v-for="info in firend_data" :key="info.index">
                <img v-bind:src="info.friendUser.image|Exchange_my_g" class="friend_box_img">
                <div class="beizhu">
                  <!--{{info.remark}}-->
                  <div class="count_box" style="width:100%;border-radius:2vw; height: 100%;display:flex;">
                    <div class="plus" style="width:8vw;border-right:1px solid #9f5c2f;"  v-on:click="count_plus(info.friendUser.id, info.index)">+</div>
                    <div class="count" style="width:31vw">{{info.count}}</div>
                    <div class="reduce" style="width:8vw;border-left:1px solid #9f5c2f;" v-on:click="count_reduce(info.friendUser.id, info.index)">-</div>
                  </div>
                </div>
                <div v-bind:class="{check_box_act:info.click_check}" class="check_box"
                     v-on:click.self="check_box_click_click(info.friendUser.id, info.index)">
                </div>
              </li>
            </ul>
          </div>
          <div class="friend_last_box">
            <div>剩余<span>{{list.quantity}}</span></div>
            <div class="certain_btn_fri" v-on:click.self="certain_firend(info.officialpost.id)">
              确定
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--friend layer e-->
    <!--申请发货 s-->
    <div v-show="send_goods" v-on:click.self="layer_send_good" style="width:100%;height:100%;background-color:rgba(0,0,0,0.6);position:absolute;top:0;left:0;z-index:100;">
      <div class="send_goods_container" style="width:76%;margin:6.7rem auto 0;background-color:#fff;border-radius:2vw;">
        <div class="send_good_header" style="width:100%;height:1.6rem;line-height:1.6rem;text-align:center;border-radius:2vw 2vw 0 0;background-color:#e5814d;color:#fff;">

          选择派信员
        </div>
        <input type="text" style="width:50vw;height:1.5rem;line-height:1.5;border:2px solid #9f5c2f;border-radius:2vw;outline:none;padding-left:2vw;margin-top:1rem;margin-bottom:1.5rem;"placeholder="搜索派信员"/>
        <ul id="scroller_letter" ref="el" >
          <li class="list_for_friend_box" v-for="info in letter_man" :key="info.index">
            <img v-bind:src="info.image|new_img_show_base" class="friend_box_img">
            <div class="beizhu">
              <!--{{info.remark}}-->
              <div class="count_box" style="width:100%;border-radius:2vw; height: 100%;
                                            display:flex;font-size:0.7rem;text-align:center;line-height:2">
                  {{info.territory}}
              </div>
            </div>
            <div v-bind:class="{check_box_act:info.click_check}" class="check_box"
                 v-on:click.self="check_box_click_click_letter(info.id, info.index)">
            </div>
          </li>
        </ul>
        <div class="send_bottom clearfix">
           <div class="send_bottom_btn" v-on:click="goTo_letter_man_certain">
             确定
           </div>
        </div>
      </div>
    </div>
    <!--申请发货 e-->
    <!-- 弹出层 other S -->
    <!--<give_other v-show="give_other_data" @newNodeEvent ="hide_othier" :yuoyuan_list="yuoyuan_list"></give_other>-->
    <!-- 弹出层 other E -->
    <!--main s-->
    <div class="main_container">
      <div class="main_container_header clearfix">
          <div class="" v-for="list in header_list" v-bind:class="{main_container_header_act:list.act}"
               v-on:click="header_change(list.index,list.name)">{{list.name}}</div>
          <!--<div class="main_container_header_act" :click="header_chagne($event)">已兑换</div>
          <div class="" :click="header_chagne">发货中</div>
          <div class="" :click="header_chagne">已发货</div>
          <div class="" :click="header_chagne">已赠送</div>-->
          <img src="../../static/img/nav_fenhao.png" class="wenhao_img">
      </div>
      <!--:style="{ height: wrapperHeight + 'px' }"-->
      <div id="wrap_scroller" ref="wrapper22" class="test_222" style="overflow:scroll">
          <!-- content goes here -->
          <div class="" ref="el" id="scroller">
            <!--已赠送 s-->
            <div class="box" v-for="info in list">
              <div class="box_header_wrap clearfix">
                <img v-bind:src="info.officialpost.images|new_img_show_base" class="box_img_s">
                <ul class="box_list">
                  <li class="border_L bor_bot box_list_title">{{info.officialpost.postName}}</li>
                  <li class="bor_bot">单价&nbsp;&nbsp;&nbsp;&nbsp;{{info.officialpost.integral}}积分</li>
                  <li class="border_L">兑换总数&nbsp;&nbsp;&nbsp;&nbsp;{{info.quantity}}</li>
                  <li class="">获赠数</li>
                </ul>
              </div>
              <div class="box_bottom_wrap">
                <div class="f_L box_base_btn" v-on:click.self="give_other(info.officialpost.id)">
                  赠有缘人
                </div>
                <div class="f_L box_base_btn m_L_15" v-on:click.self="layer_give_friend_f(info.officialpost.id)">
                  赠予好友
                </div>
                <div class="f_R box_base_btn red_c" v-on:click.self="goTo_letter_man(info.id)">
                  申请发货
                </div>
              </div>
            </div>
            <!--已赠送 e-->
            <!--fhz_list-->
            <!-- 发货中  s-->
              <div class="box"  v-for="info in fhz_list">
                <div class="box_header_wrap clearfix">
                  <img v-bind:src="info.officialpost.images|new_img_show_base" class="box_img_s">
                  <ul class="box_list" style="text-align:center;padding-left:2vw;">
                    {{info.officialpost.postName}}
                    <div v-html="info.officialpost.postContent" style="height:2rem;"></div>

                  </ul>
                </div>
                <div class="box_bottom_wrap">
                  <div class="f_L box_base_btn" v-on:click.self="layer_give_friend_f" style="border:0;color:#333;">
                    发货数{{info.deliveryQuantity}}
                </div>
                  <!--<div class="f_r box_base_btn m_L_15 li_p_x" v-on:click.self="give_other(info.id)"
                       style="float:right;padding-left:2vw;">
                    联系派信员
                  </div>-->
                  <div class="f_R box_base_btn red_c" v-on:click.self="certain_goods(info.dispatchclerk.id)">
                    确认收货
                  </div>
                </div>
              </div>

            <!-- 发货中  e -->
            <!--已发货 s-->
              <div class="box" v-for="info in ffff" >
                <div class="box_header_wrap clearfix">
                  <img v-bind:src="info.officialpost.images|new_img_show_base" class="box_img_s">
                  <ul class="box_list" style="text-align:center;padding-left:2vw;">
                    {{info.officialpost.postName}}
                    <div v-html="info.officialpost.postContent" style="height:2rem;"></div>

                  </ul>
                </div>
                <div class="box_bottom_wrap">
                  <div class="f_L box_base_btn" v-on:click.self="layer_give_friend_f" style="border:0;color:#333;">
                    发货数{{info.deliveryQuantity}}
                  </div>
                </div>
                </div>

            <!--已发货 e-->
            <!--已兑换 s-->
           <!-- v-show="list_box_3.show"-->
            <div class="box"  style="height:5.8rem;" v-for="list in al_list">
              <div class="box_header_wrap clearfix" style="padding:0;border-bottom:2px solid #eee;">
                <div class="img_wrap"
                     style="
                     border-right:2px solid #eeeeee;
                ">
                <img v-bind:src="list.officialpost.images|new_img_show_base" class="box_img_s"
                         style="width:15vw;height:15vw;border-radius:50%;
                         margin:2vw;
                         display:block;
                  ">
                </div>
                <ul style="width:80vw;line-height:4.5;font-size:0.8rem;color:#9f5c2f;">
                {{list.officialpost.postName}}
                </ul>
              </div>
              <div class="box_bottom_wrap" style="margin:0;display:flex">
                <div style="width:50vw;border-right:2px solid #eee;
                            font-size:0.8rem;height:100%;color:#9f5c2f;
                            line-height:2.5;
                            text-align:left;
                            ">
                  时间 {{list.time|fmtDate}}
                </div>
                <div style="width:30vw;
                            font-size:0.8rem;
                            color:#9f5c2f;
                            line-height:2.5;
                            ">
                  赠送数量{{list.renumber}}
                </div>
              </div>
            </div>
            <!--已兑换 e-->
          </div>
        <!--</mt-loadmore>-->
      </div>
      </div>
    <!--main e-->
    <!--有缘人layer S-->
    <div class="Give_other_box" v-on:touchstart.self="hide_othier"  v-show="give_other_data">
      <div class="wrap_letter_send_box">
        <p class="letter_title_wrap">
          <i>
            <img src="../../static/img/layer_certain_ok_sign.png" alt="" class="layer_ok">
          </i>
          <span class="letter_title">
            赠予信息
          </span>
        </p>
        <p class="fs85rem">
          愿你们能成为更好
        </p>
        <p class="fs85rem m_b_65">
          的知己好友！
        </p>
        <div class="wrap_user_img">
          <img v-bind:src="user_data.image|new_img_show_base" alt="">
        </div>
        <!--<p class="next_title">
        接下来你可以:
      </p>-->
        <!-- <div class="layer_certain_btn_1"></div>-->
        <!--<div class="layer_certain_btn_1">跟深入的了解Ta</div>-->
        <!--<div class="layer_certain_btn_2"></div>-->
        <!--<div class="layer_certain_btn_3"></div>-->
      </div>
    </div>
    <!--有缘人 layer e-->
    </div>
</template>
<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import Header_other from "./header_other/Header_other.vue";
  //limit_Scroll
  import limit_scroll from "../../static/js/limit_scroll.js"

  //layer give_friend
  import layer_give_friend from "./My_gift_give_friend.vue"
  import common from "../common/common.js"
  //layer give_other
  import give_other from './My_gift_give_other.vue'
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import "../filter/filter.js"
  import qs from "qs";
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      layer_show: false,
      header_name: "我的兑换",
      layer_give_friend_data: false,
      give_other_data: false,
      pageNo: 1,
      firend_data:"",
      user_id: "",
      firend_list:"",
      post_friend_list: [],
      refresh_this: 1,
      obj: { kl: 1 },
      post_list: [],
      click_list: [],
      send_goods: false,
      letter_man: [],
      header_act: "",
      wrapperHeight:0,
      header_list: [
        {
          name: "已兑换", act: true, index: 0
        },
        {
          name: "发货中", act: false, index: 1
        },
        {
          name: "已收货", act: false, index: 2
        },
        {
          name: "已赠送", act: false, index: 3
        }
      ],
      list_box: [{ show: false }, { show: false }, { show: false }, { show: false }],
      list_box_0: { show: false },
      list_box_1: { show: false },
      list_box_2: { show: false },
      list_box_3: { show: true },
      yuoyuan_list: [],
      user_data: [],
      friend_post_card_id: "",
      letter_man: [],
      goTo_letter_man_id: "",
      ffff: [],//已收货，
      al_list: [],//已赠送
      fhz_list: "",//发货中
      list: "",//已兑换
      is_app:"",
      base_url:""
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  filters: {
    fmtDate(obj) {
      var date = new Date(obj);
      var y = 1900 + date.getYear();
      var m = "0" + (date.getMonth() + 1);
      var d = "0" + date.getDate();
      return y + "-" + m.substring(m.length - 2, m.length) + "-" + d.substring(d.length - 2, d.length);
    },
    add_base_url(url) {
      let all_url = null
      if (url == undefined) return;
      try {
        all_url = "http://wx.yizhiweimeng.com/static/" + url
      } catch (e){
        console.log(e)
      }
      return all_url
    }
  },
  created: function () {
    this.is_app =  common.is_app(this);
    Indicator.open();
   // 已兑换
    this.$http.all([
      this.$http.post(this.base_url+'/yizhiweimen/api/user/tokenExchange/getMyExchange',
        qs.stringify(
          {
            myId: sessionStorage.getItem("user_id"),
            pageNo: 1,
            pageSize: 100
          })
      )
      ])
      .catch((thrown) => {
        Indicator.close();
        Toast({
          message: '网络出错',
          position: 'bottom',
          duration: 2000
        });
      }).then(this.$http.spread((list) => {
        // 上面两个请求都完成后，才执行这个回调方法
        this.fhz_list = "";
        Indicator.close();
        this.list = list.data
      }))
  },
  mounted: function () {
   this.is_app =  common.is_app(this);
   console.log("base_url________________")
    console.log(this.base_url);
    this.$nextTick(() => {
      //setTimeout(() =>
        this.wrapperHeight =
          document.documentElement.clientHeight -
          this.$refs.wrapper22.getBoundingClientRect().top;
      //},0)
    })
    this.user_id = sessionStorage.getItem("user_id");
  },
  methods: {
    ...mapMutations(["clear_youyuanren_mess","change_letter_man_click","set_letter_man","clear_post_mess", "set_m_exchange","set_youyuanren_mess","get_m_exchange", "change_exchange_click", "plus_count_my_exc","reduce_count_my_exc"]),
    ...mapGetters(["get_my_exchange","get_letter_man", "get_youyuanren_mess","Post_user_msg", "get_count", "get_post_mess","get_youyuanren_mess"]),
    //header_chagne
   /*
  <div class="main_container_header_act" :click="header_chagne($event)" > 已兑换</div>
  <div class="" :click="header_chagne">发货中</div>
  <div class="" :click="header_chagne">已发货</div>
  <div class="" :click="header_chagne">已赠送</div>*/
    //确认
    certain_goods: function (id) {
      Indicator.open();
      this.$http.get(this.base_url+'/yizhiweimen/api/user/tokenExchange/confirmReceiving?did='+id)
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
        })
    },
    goTo_letter_man_certain: function () {
      // /api/user / tokenExchange / getDeliveryInfoByStatus
      let list = this.get_letter_man()
      let id = null;
      for (let x = 0; x < list.length; x++) {
        if (list[x].click_check == true) {
          id = list[x].id
        }
      }
      if (id == null) {
        Toast({
          message: '请选择派信员',
          position: 'bottom',
          duration: 2000
        });
        return;
      }
      Indicator.open();
      this.$http.post(this.base_url+'/yizhiweimen/api/user/tokenExchange/ApplyforDelivery',
        qs.stringify(
          {
            "id": this.goTo_letter_man_id,
            did:id
          })
       )
      .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
          this.send_goods = false;
        })
    },
    post_friends: function (id) {

    },
    hide_othier: function () {
      this.give_other_data = false
    },
    //other get mess
    other_get_mess: function (state) {
      Indicator.open();
     // /api/user / tokenExchange / getDeliveryInfoByStatus
      this.$http.post(this.base_url+'/yizhiweimen/api/user/tokenExchange/getDeliveryInfoByStatus',
        qs.stringify(
          {
            uid: sessionStorage.getItem("user_id"),
            pageNo: 1,
            pageSize:100,
            status: state
          })
         )
        .catch((thrown) => {
          this.$emit('hide_load');
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          this.fhz_list = [];
          this.list = [];
          this.ffff = [];
          if (state == '发货中') {
            this.fhz_list = e.data
            return;
          } else if (state == '已收货') {
            this.ffff = e.data
            return;
          } else if (state == "赠送") {
            this.al_list = e.data
          }
        })
    },
    // 赠送
    Duh: function () {
      Indicator.open();
      this.$http.all([
        this.$http.post(this.base_url+'/yizhiweimen/api/user/tokenExchange/getMyExchange',
          qs.stringify(
            {
              myId: sessionStorage.getItem("user_id"),
              pageNo: 1,
              pageSize: 6
            })
        )
      ])
      .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
      }).then(this.$http.spread((list) => {
          // 上面两个请求都完成后，才执行这个回调方法
          Indicator.close();
          this.list = list.data
      }))
    },
    header_change: function (index, name) {
      this.list = []
      this.al_list = []
      this.fff = [];
      for (let x = 0; x < this.header_list.length; x++) {
        this.header_list[x].act = false;
      }
      this.header_list[index].act = true;
      //list_box [0]
      if (name == "已兑换") {
        console.log(name)

        let post_name = name.replace("已","")
        this.get_yduih();
        this.list_box_0 = true;
        this.list_box_1 = false;
        this.list_box_2 = false;
        this.list_box_3 = false;
      } else {
        this.list_box_0 = false;
        this.list_box_1 = false;
        this.list_box_2 = false;
        this.list_box_3 = false;
       // if (name == "发货中") {
         // this.list_box_0 = true
          //this.other_get_mess(name);
        //}
        if (name == "发货中") {
          this.list_box_1 = true;
          this.other_get_mess(name);
        }
        if (name == "已收货") {
          this.list_box_2 = true
          this.other_get_mess(name);
        }
        if (name == "已赠送") {
          this.list_box_3 = true
          this.other_get_mess("赠送");
        }
      }
    },
    get_yduih: function () {
      Indicator.open();
      this.$http.post(this.base_url+'/yizhiweimen/api/user/tokenExchange/getMyExchange',
        qs.stringify(
          {
            myId: sessionStorage.getItem("user_id"),
            pageNo: 1,
            pageSize: 100,
          })
        )
        .catch((thrown) => {
          //this.$emit('hide_load');
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        })
        .then((e) => {
          this.fhz_list = [];
          this.ffff = [];
          this.list = [];
          Indicator.close();
          this.list = e.data;
          this.layer_give_friend_data = !this.layer_give_friend_data;
        })
    },
    header_chagne: function () {

    },
    count_plus: function (id, index) {
        this.plus_count_my_exc(
        {
            id: id,
            index: index
        });
    },
    layer_send_good: function () {
      this.send_goods = false;
    },
    count_reduce: function (id,index) {
      this.reduce_count_my_exc({
        id: id,
        index: index
      });
    },
    //送给好友
    certain_firend: function (id) {
      //获取 用户 的 id 和 点击count
      let friends = this.get_post_mess();
      if (friends.length == 0) {
        Toast({
          message: '没有选择好友，或添加数量',
          position: 'bottom',
          duration: 2000
        })
        return;
      }
      this.$http.post(this.base_url+'/yizhiweimen/api/user/tokenExchange/giveFriend',
        qs.stringify(
          {
            key: friends,
            pid: this.friend_post_card_id,
            uid: sessionStorage.getItem("user_id")
          })
       )
       .catch((thrown) => {
          this.$emit('hide_load');
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
      })
      .then((e) => {

        this.layer_give_friend_data = !this.layer_give_friend_data;
      })
    },
    check_box_click_click: function (id, index) {
      this.change_exchange_click({
        id: id,
        index:index
      })
    },
    hid_layer: function () {
      this.layer_give_friend_data = false;
    },
    check_box_click: function (id, index) {
      this.get_mess();
    },
    //friend
    get_mess_f:function(mess) {
      let id= mess[0]
      let index = mess[1]
      this.firend_list[index].click_check = true;
    },
    //下拉
    refresh: function (done) {
      this.$http.all([
        this.$http.post(this.base_url+'/yizhiweimen/api/user/tokenExchange/getMyExchange',
          qs.stringify(
            {
              myId: sessionStorage.getItem("user_id"),
              pageNo: 1,
              pageSize: 6
            })
        )
      ])
      .catch((thrown) => {
          if (flag == true) {
            done()
          } else {
            done(true)
          }
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then(this.$http.spread((list) => {
          // 上面两个请求都完成后，才执行这个回调方法
          done();
          this.list = list.data
      }))
    },
    //上啦
    infinite: function (done) {

    },
    get_mess: function (id) {
      this.friend_post_card_id = id;
      this.$http.all([
        this.$http.get(this.base_url+'/yizhiweimen/api/user/friends/getFriendsByPrimaryId?primaryId=' + this.user_id + "&pageNo=1&pageSize=100")
      ])
      .catch((thrown) => {
        Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
        });
        return;
      })
      .then(this.$http.spread((list) => {
          // 上面两个请求都完成后，才执行这个回调方法
         // this.firend_data = list.data;
        let temp_list = list.data;
          let click_list = [];
          for (let x = 0; x < temp_list.length; x++){
            temp_list[x].click_check = false;
            temp_list[x].index = x;
            temp_list[x].count = 0;
          }
          this.layer_give_friend_data = true;
          console.log("layer_give_friend_data"+this.layer_give_friend_data)
          //this.set_m_exchange(temp_list);
      console.log(temp_list);
          this.firend_data = temp_list
        }))
    },
    layer_give_friend_f: function (id) {
        console.log("好友")
      try{
        this.clear_post_mess();
        this.get_mess(id);
      }catch(e){

      }
    },
    //赠有缘人
    give_other: function (id) {
      //this.clear_youyuanren_mess();
     // 赠送人id（user.id），赠送卡片id(officialpost.id)
      this.$http.post(this.base_url+'/yizhiweimen/api/user/tokenExchange/giveUyuanren',
        qs.stringify(
          {
            "user.id": sessionStorage.getItem("user_id"),
            "officialpost.id":id
          })
      )
      .catch((thrown) => {
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) =>{
          //有出现没有数据的情况
           if(!!e.data) {
              return
           }
          this.user_data = e.data;
          console.log("user_data");
          console.log(e.data);
          //this.set_youyuanren_mess(e.data)
          setTimeout(() => {
            this.give_other_data = true;
          },100)
        })
    },
    hide_detail_1: function () {
      this.layer_show = true;
    },
    //页面跳转
    goTo: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    open_certain_btn:function () {
        //show_layer 判断显示
      this.$store.dispatch("thom_redirect",
      {
          name:"/Index_main/Wrap_certain_layer/Certain_layer_input",router:this.$router
      });
    },
    goTo_letter_man: function (id) {
      this.goTo_letter_man_id = id
      this.send_goods = !this.send_goods
      this.$http.all([
        this.$http.get(this.base_url+'/yizhiweimen/api/user/dispatchclerk/getDispatchclerkBySchool?school=' + sessionStorage.getItem("school_id") + "&pageNo=1&pageSize=100")
      ])
        .catch((thrown) => {
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
          return;
        })
        .then(this.$http.spread((list) => {

          // 上面两个请求都完成后，才执行这个回调方法
          // this.firend_data = list.data;
          let temp_list = list.data;
          let click_list = [];
          for (let x = 0; x < temp_list.length; x++) {
            temp_list[x].click_check = false;
            temp_list[x].index = x;
            temp_list[x].count = 0;
          }

          //this.layer_give_friend_data = !this.layer_give_friend_data;
          this.set_letter_man(temp_list)
          this.letter_man = temp_list;
        }))
    },
    check_box_click_click_letter: function (id,index) {
      console.log(id)
      console.log(index)
      this.change_letter_man_click(index)
    }
  },
  components: {
    Header_other,
    layer_give_friend,
    give_other
  }
}
</script>
<style scoped>
  /*other layert*/
  .m_b_65 {
    margin-bottom: 0.65rem;
  }

  .fs85rem {
    font-size: 0.7rem;
    font-weight: 500;
  }

  .letter_title_wrap {
    font-weight: 600;
    margin-bottom: 1.2rem;
    margin-top: 1.4rem;
  }

  .letter_title {
    font-size: 0.85rem;
  }

  .layer_certain_btn_1 {
    width: 53%;
    background-image: url("../../static/img/deep_konw.jpg")
  }

  .layer_certain_btn_2 {
    width: 53%;
    background-image: url("../../static/img/get_letter.jpg")
  }

  .layer_certain_btn_3 {
    width: 60%;
    background-image: url("../../static/img/give_other.jpg")
  }

  .Give_other_box {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.6);
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 100;
  }

  .wrap_letter_send_box {
    // height: 18rem;
    height: 10rem;
  }

  .letter_send_box p:nth-child(1) {
    margin-top: 1rem;
  }

  .letter_send_box p:nth-child(2) {
    margin-top: 1rem;
  }

  .layer_certain_btn_1 {
    width: 60%;
    height: 2rem;
    line-height: 2rem;
    margin: 0 auto 0.1rem;
  }

  .layer_certain_btn_2 {
    width: 60%;
    height: 2rem;
    line-height: 2rem;
    margin: 0 auto 0.1rem;
  }

  .wrap_user_img {
    margin-bottom: 0.5rem;
  }

  .wrap_letter_send_box {
    background-color: #fff;
    background-image: none;
  }
  /*other layer*/
  /**letter s*/
  #scroller_letter{
    height:12.5rem;
    padding-bottom:1.25rem;
    border-bottom:1px solid #333;
  }
  .send_bottom_btn {
    margin-top:0.5rem;
    margin-bottom:0.5rem;
    //margin-bottom:1.2rem;
    width: 20vw;
    height: 1.6rem;
    border-radius: 2vw;
    font-size: 0.6rem;
    line-height: 1.6rem;
    float:right;
    margin-right:1vw;
    text-align: center;
    border: 2px solid #e85454;
    color: #e85454;
  }
  /*letter e*/
  /*friend layer s*/
  #wrapper2 {
    position: relative;
    width: 100%;
    height: 16.65rem;
    overflow: hidden;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
  }

  #scroller {
    overflow: scroll;
    width: 100%;
    /*position: absolute;*/
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  .certain_btn_fri {
    width: 3.65rem;
    height: 1.4rem;
    line-height: 2.2;
    margin-top: 0.2rem;
    border: 1px solid #e85454;
    color: #e85454;
    border-radius: 1vw;
    text-align: center;
  }

  .friend_last_box {
    display: flex;
    justify-content: space-around;
    height: 3rem;
    line-height: 2rem;
    font-size: 0.7rem;
    color: #9f5c2f;
  }

  .list_for_friend_box {
    padding-left: 7%;
    padding-right: 7%;
    display: flex;
    justify-content: space-around;
  }

  .friend_box_img {
    width: 2.15rem;
    height: 2.15rem;
    display: block;
    border-radius: 50%;
    border: 1px solid #9f5c2f;
  }

  .check_box {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1vw;
    border: 1px solid #9f5c2f;
    margin-top: 0.3rem;
  }

  .check_box_act {
    background-color: #9cce9c;
  }

  .beizhu {
    margin-top: 0.3rem;
    width: 35vw;
    height: 1.5rem;
    border: 1px solid #9f5c2f;
    border-radius: 2vw;
    line-height: 1.6;
    font-size: 0.8rem;
  }

  .friend_box_header {
    margin-top: 1.125rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #9f5c2f;
    text-align: center;
  }

  .letter_send_box {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    border: 0;
  }

  .friend_box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    height: 21.5rem;
    width: 76%;
    border-radius: 2vw;
  }

  /*scroll s*/


  /*certain btn e*/
  /*scroll e*/


  /*friend layer e*/
  .box_list_title{
    text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
  }
  /*scroll-view S*/
  .scroll-view {
    /* -- Attention: This line is extremely important in chrome 55+! -- */
    touch-action: none;
    /* -- Attention-- */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
/*scroll-view e*/
  #wrap_scroller{
      //transform:translateY(20px);
      height:28.4rem;
  }
  .box_bottom_wrap {
    margin-top: 0.3rem;
    padding-left: 5%;
    padding-right: 5%;
  }
  .m_L_15 {
    margin-left: 2vw;
  }
  .box_bottom_wrap .red_c {
    color: #e85454;
    border: 2px solid #e85454;
  }
  .box_base_btn {
    padding:0 2px;
    width: 20%;
    font-size: 0.7rem;
    height: 1.25rem;
    line-height: 2;
    border-radius: 2vw;
    border: 2px solid #9f5c2f;
    color: #9f5c2f;
  }
  .box_list li {
    width: 48%;
  }
  .box_list {
    border-radius:2vw;
    background-color: #eeeeee;
    flex-wrap: wrap;
    font-size: 0.7rem;
    line-height: 2.45rem;
    width: 11.75rem;
    display: flex;
  }
  .box_header_wrap {
    padding-left:1.4vw;
    padding-top:0.35rem;
    display: flex;
    justify-content: space-between;
  }
  .bor_bot {
    border-bottom: 1px solid #dfdfdf
  }
  .border_L {
    border-right: 1px solid #dfdfdf;
  }
  .box_img_s {
    display:block;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 2vw;
    border: 2px solid #e9c7ac;
  }
  .box {
    height: 7.5rem;
    width: 93%;
    background-color: #fff;
    border-radius: 2vw;
    margin: 0.6rem auto;
    box-shadow: 0 2px 8px 2px rgba(180, 180, 180, 0.62);
  }
  .wenhao_img {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translateY(-50%);
  }
   .main_container {
     height:30rem;
    background-color: #eeeeee;
  }
  .main_container_header {
    position:relative;
    height: 1.75rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    font-size: 0.7rem;
    line-height: 2.6;
    color: #b4b4b4;
  }
  .main_container_header_act {
    color: #9f5c2f;
  }
  ._v-container {
    top: none;
    position: relative;
  }

  .git_Exchange_contain {
    background-color: #eeeeee;
    height: 100%;
  }
  .friend_box_img {
    border: 0;
    width: 2.15rem;
    height: 2.15rem;
    display: block;
    border-radius: 50%;
    border: 1px solid #9f5c2f;
  }
</style>
